<template>
  <div style="position: relative">
    <el-card
      ><div class="main">
        <!-- <div class="left"></div> -->
        <div class="right">
          <div class="right_item">
            <div class="right_top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="top">
              <el-button type="primary" @click="clickFn">添加分类</el-button>
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form>
                  <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="父级类别" :label-width="formLabelWidth">
                    <el-cascader
                      :options="options"
                      v-model="selectedOptions"
                      size="small"
                      ref="cascaderAddr"
                      filterable
                      @input="handleChange"
                      placeholder="请选择上级分类"
                      :props="modelTypeProps"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="postFn">确 定</el-button>
                </div>
              </el-dialog>
            </div>
            <div>
              <el-table
                :data="flArr"
                style="width: 100%; margin-bottom: 20px"
                row-key="cat_id"
                border
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
              >
                <el-table-column prop="cat_name" label="分类名称" sortable>
                </el-table-column>
                <el-table-column prop="name" label="是否有效" sortable>
                  <i class="el-icon-success" style="color: chartreuse"></i>
                </el-table-column>
                <el-table-column prop="address" label="排序">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级标签</el-tag>
                    <el-tag v-if="scope.row.cat_level === 1" type="success"
                      >二级标签</el-tag
                    >
                    <el-tag v-if="scope.row.cat_level === 2" type="warning"
                      >三级标签</el-tag
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[3, 5, 10, 15]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="30"
                  v-model="currentPage4"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div></div
    ></el-card>
  </div>
</template>
<script>
import { ListAPI, ListAddAPI } from "../../api/index";
export default {
  data() {
    return {
      currentPage4: 1,
      num: 5,
      flArr: [],
      options: [],
      postList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      modelTypeProps: {
        emitPath: false,
        checkStrictly: true,
      },
      selectedOptions: "",
      name: "",
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //封装列表获取
    messageFn() {
      if (this.flArr.length !== 0) {
        this.$message({
          message: "列表信息获取成功",
          type: "success",
        });
      } else {
        this.$message.error("列表信息获取失败");
      }
    },
    handleChange(e) {
      //第2种
      const node = this.$refs.cascaderAddr.getCheckedNodes(); // 获取当前点击的节点
      this.postList = node[0].path; // 获取当前点击的节点的label
    },
    postFn() {
      (this.dialogFormVisible = false), this.postAddList();
      this.getList();
    },
    //封装post请求
    async postAddList() {
      const res = await ListAddAPI({
        cat_pid: this.postList[this.postList.length - 1] || 0,
        cat_name: this.name,
        cat_level: this.postList.length,
      });
    },
    //封装get请求
    async getList(val, val1) {
      const res = await ListAPI({
        type: [3],
        pagenum: val1 || 1,
        pagesize: val || 3,
      });
      this.flArr = res.data.data.result;
      this.messageFn();
    },
    //分页传递页码
    handleSizeChange(val) {
      this.getList(val, this.currentPage4);
    },
    //分页传递每页多少条数据
    handleCurrentChange(val1) {
      this.getList(this.num, val1);
    },
    //递归替换
    async clickFn() {
      this.dialogFormVisible = true;
      // 获取二层的数据请求
      const res1 = await ListAPI({
        type: 2,
      });
      this.parentCateList = res1.data.data;

      // 加工数据
      const res = this.parentCateList.map((item) => {
        // console.log(item);
        function fn(obj) {
          let newObj = {
            value: obj.cat_id,
            label: obj.cat_name,
          };
          if (!obj.children) {
            return newObj;
          }
          // console.log(newObj);
          if (obj.children) {
            newObj.children = obj.children.map((item) => {
              item = fn(item);
              return item;
            });
          }
          return newObj;
        }
        return fn(item);
      });

      this.options = res;
      console.log(this.options);
    },
  },
};
</script>
<style scoped>
.top {
  width: 100%;
  height: 60px;
}

.main {
  display: flex;
}

/* .main .left {
  width: 100%;
  height: 100%;
} */

.main .right {
  /* padding: 20px; */
  width: 100%;
  /* height: 920px; */
}

.main .right .right_item {
  /* padding: 20px; */
  width: 100%;
  /* height: 820px; */
  background-color: #fff;
  margin-bottom: 20px;
}

.main .right .right_item .right_top {
  margin-bottom: 10px;
}
.main .right .right_item .top {
  margin-bottom: 10px;
}
</style>
